<script setup lang="ts">
import { Router } from "@/utils/router";
import Video from "@/components/media/video.vue";
import more from "@/package/famous-talk/static/more.png";
import pen from "@/package/famous-talk/static/pen.png";
import like1 from "@/package/famous-talk/static/like1.png";
import like2 from "@/package/famous-talk/static/like2.png";
import love1 from "@/package/famous-talk/static/love1.png";
import love2 from "@/package/famous-talk/static/love2.png";
import share from "@/package/famous-talk/static/share.png";
import Comment from "../components/conment.vue";
import {
  get_famous_detail,
  comment_list,
  comment_add,
} from "@/package/famous-talk/api/guider";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { Toast } from "@/utils/toast";
import ReplayContent from "../components/reply-content.vue";
import LoveItem1 from "../components/love-item1.vue";
import FavoriteItem from "../components/favorite-item.vue";
import { reactive, provide, ref } from "vue";
import { my_data } from "../../api/guider";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { Account } from "@/utils/account";
onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {});
});
const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "",
  (e) => {
    if (e.from === "button") {
      shareOption.title = detail.value.title;
      shareOption.path = `package/famous-talk/pages/detail/index?id=${detail.value.id}`;
      shareOption.imageUrl = detail.value.share_pic;
    }
  }
);
const props = defineProps<{ id: number }>();
type DetailType = {
  id: number;
  type: number; //1名导专访 2导游故事 3用户故事 4导游代言
  title: string;
  sub_title: string; //副标题
  guider_id: number; //导游id
  author_id: number;
  start_date: string; //日期
  content: string; //文章内容(富文本)
  share_title: string; //分享标题
  share_pic: string; //分享图
  guider_name: string; //导游名称
  avatar_url: string; //导游头像
  guider_tips: string; //导游介绍
  author_name: string; //作者名称
  tag: string; //导游标签
  headerimg: string; //作者头像
  favorite_count: string; //收藏
  like_count: string; //点赞
};
type CommenDetailType = {
  count: number;
  count_int: number;
  comment: any[];
};
const detail = ref<DetailType>({} as DetailType);
const commenDetail = ref<CommenDetailType>({} as CommenDetailType);
const commenDetail2 = ref<any[]>([]);
const commentShow = ref(false);
onLoad(() => {
  getDetail();
  getCommenList();
  Account.isLogin && getConfig();
});
const commentKeyword = ref("");

const getDetail = () => {
  get_famous_detail(props.id).then((res: any) => {
    detail.value = res;
  });
};
const getCommenList = () => {
  comment_list({
    relation_id: props.id,
    type: 23,
    choose_type: 0,
    sort: "asc",
  }).then((res) => {
    commenDetail.value = res;
    commenDetail2.value = res.comment;
  });
};
const isLove = ref(false);
const isLike = ref(false);
const loveClick = () => {
  isLove.value = !isLove.value;
};
const lickClick = () => {
  isLike.value = !isLike.value;
};
const commentEnter = (comment_id = "") => {
  return () => {
    comment_add({
      relation_id: props.id,
      type: 23,
      content: commentKeyword.value,
      comment_id,
    }).then(() => {
      Toast.show("评论成功！");
      commentKeyword.value = "";
      getCommenList();
    });
  };
};
//评论弹窗 ------------------------------------
const ReplayContentref = ref<typeof ReplayContent>();
const replyClick = () => {
  ReplayContentref.value?.show({
    nickname: "评论：" + detail.value.title,
    relation_id: props.id,
    comment_id: "",
    type: 23,
  });
};
const confirm = () => {
  getCommenList();
};
const guiderDetail = () => {
  Router.navigateTo(
    `/package/guider/pages/detail/index?id=${detail.value.guider_id}`
  );
};
//--------------------------------------------------

const likeConfig = reactive({
  guider_interview_like: [],
  guider_interview_favourite: [],
});
const itemShow = ref(false);
const getConfig = () => {
  //名导访谈首页 点赞 收藏
  return my_data("guider_interview_like,guider_interview_favourite").then(
    (res) => {
      likeConfig.guider_interview_like = res.guider_interview_like;
      likeConfig.guider_interview_favourite = res.guider_interview_favourite;
      reflash();
    }
  );
};

const pageShow = ref(true);
const reflash = () => {
  pageShow.value = false;
  setTimeout(() => {
    pageShow.value = true;
  });
};
const istoLogin = (oprate: () => {}) => {
  const fn = () => {
    getConfig().then(() => {
      getCommenList();
    });

    Router.navigateBack();
  };
  Account.checkLogin((isLogin) => {
    isLogin ? fn() : oprate();
  });
};
provide("likeConfig", { likeConfig, getConfig, istoLogin });
</script>

<template>
  <view class="box">
    <view class="wrap">
      <view class="headTitle">{{ detail.title }} </view>
      <view class="headImg">
        <image :src="detail.headerimg" mode="scaleToFill" />
        <view class="headWrod">
          <view class="name">{{ detail.author_name }}</view>
          <view class="date">{{ detail.start_date }}</view>
        </view>
      </view>
      <view class="wordWrap">
        <rich-text :nodes="detail.content" />
      </view>
      <view class="people">
        
        <view class="peopleImageWrap">
          
        <image :src="detail.avatar_url" mode="widthFix" />
        </view>

        <view class="peopleDes" v-if="detail.guider_name">
          <view class="des1">
            <view class="nameWrap">
              <view class="name">{{ detail.guider_name }}</view>
              <view class="expert" v-if="detail.tag">{{ detail.tag }}</view>
            </view>
            <view class="moreWrap" @click="guiderDetail">
              <view class="moreWord">了解更多</view>
              <image :src="more" mode="scaleToFill" />
            </view>
          </view>
          <view class="des2">
            {{ detail.guider_tips }}
          </view>
        </view>
      </view>
      <view class="commentWrap">
        <view class="commentTitle" v-if="commenDetail.count_int">
          评论 {{ commenDetail.count_int }}
        </view>
        <Comment
          v-for="item in commenDetail2"
          :key="item.id"
          :data="item"
          :parent_id="id"
          :getCommenList="getCommenList"
        />
      </view>
    </view>
    <view class="footer">
      <view class="footer2">
        <view class="footerContent">
          <view class="inputWrap" @click="replyClick">
            <image :src="pen" mode="scaleToFill" />
            <text class="inputItem">评论支持一下</text>
          </view>
          <view class="item">
            <LoveItem1
            :id="Number(props.id)"
            :like_count="detail.like_count"
            @love="getDetail"
            v-if="pageShow"

          />
          </view>
          <view class="item">
            <FavoriteItem
                v-if="pageShow"
            :id="Number(props.id)"
            :favorite_count="detail.favorite_count"
            @love="getDetail"
          />
          </view>
          
          <view class="item">
            <image :src="share" mode="scaleToFill" />
            <text>转发</text>
               <button class="button" openType="share" >
        
        </button>
          </view>
        </view>
      </view>
    </view>
    <ReplayContent ref="ReplayContentref" @confirm="confirm" />
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
page {
  padding-bottom: 0;
}

.wrap {
  overflow: scroll;
  box-sizing: border-box;
  padding: 0 30rpx 30rpx 30rpx;
  height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
  background: #ffffff;
  .headTitle {
    font-weight: 600;
    font-size: 40rpx;
    color: #333333;
    line-height: 56rpx;
  }
  .headImg {
    margin: 30rpx 0;
    display: flex;
    align-items: center;
    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .headWrod {
      .name {
        font-size: 24rpx;
        color: #333333;
        line-height: 34rpx;
      }
      .date {
        font-size: 22rpx;
        color: #999999;
        line-height: 32rpx;
      }
    }
  }
  .wordWrap {
    font-size: 30rpx;
    color: #333333;
    line-height: 60rpx;
  }
  .imageWrap {
    margin: 30rpx 0;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
    image {
      width: 100%;
    }
  }
  .videoWrap {
    margin: 30rpx 0;
    width: 690rpx;
    height: 386rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .videoPlayer {
      background-color: #000000;
      border: 2rpx solid #fff;
      outline-color: #fff;
      outline: #fff;
    }
  }
  .people {
    padding: 30rpx;
    display: flex;
    width: 100%;
    height: 160rpx;
    background: #f5f5f5;
    border-radius: 20rpx;

    box-sizing: border-box;
    align-items: center;
    .peopleImageWrap {
      width: 120rpx;
      height: 120rpx;
      border: 4rpx solid #ffffff;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      @include center();
    }
    image {
      flex-shrink: 0;
      width: 120rpx;
    }
    .peopleDes {
      flex-grow: 1;
      margin-left: 30rpx;
      .des1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nameWrap {
          align-items: center;
          display: flex;
          .name {
            font-weight: bold;
            font-size: 28rpx;

            color: #333333;
            line-height: 40rpx;
            margin-right: 20rpx;
          }
          .expert {
            padding: 0 20rpx;
            height: 28rpx;
            background: rgba(255, 121, 0, 0.08);
            border: 1rpx solid #ff7900;
            border-radius: 16rpx;
            font-size: 20rpx;
            text-align: center;
            color: #ff7900;
            line-height: 28rpx;
          }
        }
        .moreWrap {
          display: flex;
          align-items: center;
          .moreWord {
            font-size: 24rpx;
            color: #666666;
            line-height: 34rpx;
            margin-right: 6rpx;
          }
          image {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
      .des2 {
        //限制文本换行
        @include lineLimit(2);
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #999999;
        line-height: 34rpx;
      }
    }
  }
  .commentWrap {
    border-top: 2rpx solid #eeeeee;
    margin-top: 30rpx;
    .commentTitle {
      padding: 28rpx 0;
      font-size: 36rpx;
      color: #333333;
      line-height: 50rpx;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background: #fff;
  box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
  .footer2 {
    padding: 16rpx 30rpx;
    box-sizing: border-box;
    .footerContent {
      display: flex;
      justify-content: space-between;
      .inputWrap {
        width: 280rpx;
        height: 70rpx;
        background: #f6f6f6;
        border-radius: 36rpx;
        box-sizing: border-box;
        display: flex;
        padding-left: 30rpx;
        padding-top: 20rpx;
        .inputItem {
          font-size: 28rpx;
          color: #999999;
          line-height: 28rpx;
        }
        image {
          margin-right: 10rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
      .item {
        display: flex;
        align-items: center;
        position: relative;
        button {
          position: absolute;
          left: 0;
          top: 0;
          border: none;
          width: 98rpx;
          height: 36rpx;
          opacity: 0;
        }
        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
        text {
          font-size: 24rpx;
          color: #666666;
          line-height: 34rpx;
        }
      }
    }
  }
}
</style>
